<template>
  <div>
    <div class="login_box" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <!-- 登录表单区域 -->
      <el-form size="mini" title="用户登录" class="elform">
        <!-- 用户名 -->
        <el-form-item>
          <h2 style="margin-left:-15px">账号:</h2>
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-s-custom"
            v-model="selectUser.id"
            size="big"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item style="margin-bottom:80px">
          <h2 style="margin-left:-15px">密码:</h2>
          <el-input
            placeholder="请输入密码"
            show-password
            prefix-icon="el-icon-key"
            v-model="selectUser.password"
            size="big"
          ></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="check(selectUser.id)"
            class="detailed"
            size="small"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            @click="register()"
            class="detailed"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    >
    </vue-particles>

    <el-dialog
      :title="dialogCategory"
      :visible.sync="dialogVisible"
      @close="resetForm()"
      center
    >
      <el-form :model="selectUser">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            placeholder="输入账号"
            v-model="selectUser.id"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="selectUser.username"
            placeholder="输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-model="selectUser.address"
            placeholder="输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="selectUser.tel" placeholder="输入电话"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="selectUser.password"
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="elbutton"
          >取消</el-button
        >
        <el-button type="primary" @click="addUser()" class="elbutton"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      dialogCategory: '注册',
      selectUser: {
        id: '',
        username: '',
        address: '',
        tel: '',
        password: ''
      },
      formLabelWidth: '100px',
      tableData: [],
      userName: ''
    }
  },
  methods: {
    //   清除输入框内存
    resetForm () {
      this.selectUser.id = ''
      this.selectUser.username = ''
      this.selectUser.address = ''
      this.selectUser.tel = ''
      this.selectUser.password = ''
    },
    addUser () {
      console.log(this.selectUser)
      if (this.selectUser.id === '' || this.selectUser.username === '' || this.selectUser.address === '' || this.selectUser.tel === '' || this.selectUser.password === '') {
        this.$alert('请完善个人信息', '注册失败', {
          confirmButtonText: '确定'
        })
      } else {
        this.$ajax({
          method: 'post',
          url: '/user/user',
          data: this.selectUser
        })
          .then(res => {
            console.log(res.data)
            if (res.data === false) {
              this.addUserError()
            } else {
              this.dialogVisible = false
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    register () {
      this.dialogVisible = true
      this.dialogCategory = '注册'
      console.log(this.dialogCategory)
    },
    check (id) {
      this.$ajax({
        method: 'get',
        url: '/user/login',
        params: { id: id }
      })
        .then(res => {
          console.log(res.data)
          // console.log(this.selectUser.password)
          // eslint-disable-next-line eqeqeq
          if (res.data == this.selectUser.password && this.selectUser.password !== '') {
            this.getuserName(id)
          } else {
            this.showerror()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getuserName (id) {
      this.$ajax({
        method: 'get',
        url: '/user/findName',
        params: { id: id }
      })
        .then(res => {
          console.log(res.data)
          this.userName = res.data
          this.$emit('getUserName', this.userName)
          this.$emit('getUserId', this.selectUser.id)
          console.log(this.userName)
          console.log(this.selectUser.id)
          this.jump()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    jump () {
      this.$router
        .push({ name: 'user', query: { userid: this.selectUser.id } })
        .catch(() => {})
    },
    showerror () {
      this.$alert('密码错误或账号未注册', '错误', {
        confirmButtonText: '确定'
      })
    },
    addUserError () {
      this.$alert('注册失败', '错误', {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>

<style scoped>
.login_box {
  width: 500px;
  height: 450px;
  /* background-color: #fff; */
  background-color: #ffffffb3;
  border-radius: 5px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.elform {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
.elbutton {
  width: 10%;
}

.code {
  width: 45%;
}
img {
  /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
  display: line-inline;
  width: 45%;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}
.rememberMe {
  color: #fff;
}
</style>
